<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>考勤记录</title>
		
		<link rel="stylesheet" href="../static/css/xadmin.css">
		<link rel="stylesheet" href="../static/css/xadmin.css">
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="../static/lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="../static/js/xadmin.js"></script>
		<script src="../static/js/my.js"></script>
	</head>
	<body>
		
		<!-- 包含查询条件选择的表单 -->
		<form class="x-so"  id="myform">
			<h1 align="center">考勤记录总览</font></h1>
			<select id="type" name="type" style="width: 150px;height: 37px">
			    <option value="">考勤类型</option>
			    <option value="请假">请假</option>
			    <option value="调休">调休</option>
				 <option value="迟到">迟到</option>
				  <option value="旷工">旷工</option>
				   <option value="加班">加班</option>
				    <option value="出差">出差</option>
					 <option value="停工">停工</option>
			</select>
		    <select id="condition" name="condition" style="width: 150px;height: 37px">
		        <option value="">请选择</option>
		        <option value="员工ID">员工ID</option>
		        <option value="员工姓名">员工姓名</option>
		    </select>
		    <input class="layui-input" name="conValue" id="conValue"  type="text" placeholder="请输入查询条件">
		    <input type="button" class="layui-btn layui-btn-radius layui-btn-warm" onclick="search()" value="查询" >
			<input type="button" class="layui-btn layui-btn-radius layui-btn-warm" onclick="bing()" value="以图形形式查看" >
		</form>
		
		
		<!-- 显示分页数据的table -->
		<table  class="layui-table" >
		    <thead>
		    <th>编号</th>
		    <th>姓名</th>
		    <th>考勤类型</th>
			<th>时间</th>
		    <th>奖金</th>
			<th>罚款</th>
			<th>处理人</th>
			
		    </thead>
		    <tbody>
		   
		    </tbody>
		</table>
		
		
		

		<!-- 显示页码信息的div -->
		<div align="center">
			
			  <button type="button" class="layui-btn layui-btn-radius layui-btn-warm"onclick="pre()">
			     <i class="layui-icon">&#xe603;</i>
			   </button>
			   <button type="button" class="layui-btn layui-btn-radius layui-btn-warm"onclick="next()">
			      <i class="layui-icon">&#xe602;</i>
			    </button>
		    
		    一共有<span id="total"></span>条数据
		    一共有<span id="totalPage"></span>页
		    当前第<span id="cur"></span>页
			
		</div>
		
		
</html>


<script>
	//定义变量
	//1.选择的查询条件(员工id/员工编号/考勤类型)
	var condition="";
	var type="";
	//2.输入的查询条件
	var conValue="";
	//3.页码数:
	var page=1;
	var row=6;
	//4.//上一页/下一页
	var prePage=0;
	var nextPage=0;
	var mydata;
	//文档加载事件
	$(function(){
			//在文档加载时查询所有考勤记录
		
		
			selectAll();
			
		})
	
	
	//上一页		
	function pre()
	{
		page=prePage;
		
		selectAll();
	
	}
	//下一页
	function next()
	{
		page=nextPage;
		selectAll();
		
	}
	
	//查询验证：
	    function search() {
	        //获取用户输入的查询条件
	        var v=$("#conValue").val();
	        //获取用户选择的查询
	        var con=$("#condition").val();
			//获取用户
			var t=$("#type").val();
	        //判断用户选择的查询条件是什么
	        if(con=="编号")
	        {
	            //创建正则表达式对象
	            var re=/^[0-9]*$/;
	            //验证用户输入的信息是否是数字
	            if(re.test(v))
	            {
	               condition=con;
				   conValue=v;
				   loadData();
	            }else
	            {
	                layer.alert("请输入数字");
	            }
	        }else
	        {
	           
	            condition=con;
	            conValue=v;
				type=t;
	            selectAll();
				
	
	        }
	
	    }
	
	//查询所有考勤记录
	function selectAll()
	{
		$.ajax({
				url:address+"/check/selectAllAjax",
				type:"get",
				data:{"page":page,"row":row,"condition":condition,"conValue":conValue,"type":type},
				dataType:"json",
				success:function (data) {
				   
				   //遍历分页数据,拼接字符串
				  
				 var html="";
				 for(var i=0;i<data.list.length;i++)
				 {
				 	 html+="<tr>"
						+"<td>"+data.list[i].userId+"</td>"
						+"<td>"+data.list[i].userName+"</td>"
						+"<td>"+data.list[i].type+"</td>"
						+"<td>"+data.list[i].time+"</td>"
						+"<td>"+data.list[i].addMoney+"</td>"
						+"<td>"+data.list[i].punishMoney+"</td>"
						+"<td>"+data.list[i].bossName+"</td>"
					  +"</tr>"
				 }
				    $("tbody").html(html);
				    
				    $("#total").text(data.total);
				    $("#totalPage").text(data.totalPage);
				    $("#cur").text(data.cur);
				   prePage=data.pre;
				   nextPage=data.next;
				
				    }
			})
	}
	
	
	function bing()
	{
		window.location.href="bing.html";
	}
	
	
	
</script>
